<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<c:set var="ctx" value="<%=basePath%>" />
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <title>云净</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">    
    <meta name="format-detection" content="telephone=no, email=no">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="keywords" content="云净,透析单,网页透析" />
	<meta http-equiv="description" content="云净透析单" />
	<link href="image/yunjing/logo.ico" type="image/x-icon" rel="shortcut icon">
	<link rel="stylesheet" type="text/css" href="${ctx}bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}css/common/base.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}css/xgtl_wdbj.css" />
</head>
<body>
	<div id="markViewWrap">
        <div class="mark-pic-top">
            <div class="back" style="padding:4px;width:60px;height:42px;"><img src="image/yunjing/mtxform/go_back.svg" style="width:24px;height:24px;" class="goback_arrows" alt="返回" /></div>
            <div class="title process-name" style="font-size:18px;">穿刺位点</div>
            <div class="save-mark" style="width:76px;text-align:right;" onclick="saveMarkList()"></div>
        </div>
        <div class="title-2 title" style="position:relative;">穿刺位点<span style="position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);color:red;" id="mark_tips"></span></div>
        <div>
        	<form class="form-inline" onsubmit="return false;" style="padding: 10px 4px;font-size:15px;">
	          <table class="table-condensed" style="width: 100%;">
	              <tbody>	             
		              <tr class="tr_head">
				        <td style="width:50%">
					       <div style="position:relative;width:100%;">   
					          <span>A端位点：</span>
						      <select class="form-control form-control2" name="tx_bc" id="xgtl_mark_a"  onchange="selectMarkA('#xgtl_mark_a','.mark-target-a');">
					          </select>
					        </div>  
				         </td> 
					     <td class="mtxform_td_padding" style="text-align:right;width:50%;">
						    <div style="position:relative;width:100%;">   
						       <span>V端位点：</span> 
						       <select class="form-control form-control2" name="tx_order" id="xgtl_mark_v"  onchange="selectMarkA('#xgtl_mark_v','.mark-target-v');">
						       </select>
						    </div>    
					     </td>
			          </tr>
		         </tbody>
	         </table>
	       </form>
        </div>
         <div class="mtx-markpic-wrap">
	        <div id="point_mark_img_wrap1" style="width:100%;padding:0;border:0;">
	        	<img id="ossPointMarkImg" style="max-width:100%;"  class="point-mark-img" alt="血管通路图">
	        </div>
	     </div>
	     <div class="mtx-markpic-change-wrap" >
	     	<span id="change_pic_btn" >更换图片</span>	
	     </div>
	     <input type="file" class="upload_input" name="mark_img" id="changePicInput"  accept="image/*" >
	     <div class="title mark-list-title" style="margin:8px 0 6px 0;"><span class="line"></span><span>近10次位点记录：</span></div>
	     <div id="pointMarkList">
  			<table class="table table-bordered">
  				<tbody id="markListTbody">
  					<tr class="mark-thead-tr">
  						<td class="mark-date mark-date-th">日期</td>
  						<td class="mark-point mark-point-th">位点</td>
  						<td class="other-case other-case-th">内瘘</td>
  					</tr>
  					 <c:forEach items="${wdjl}" var="jl"  varStatus="status" >
	  					<tr>
	  						<td class="mark-date">${jl.tx_txsj}</td>
	  						<td class="mark-point mark-point-text">
	  							<p>A端：<span class="mark-a">${jl.tx_ccwd_a}</span></p>
	  							<p>V端：<span class="mark-v">${jl.tx_ccwd_v}</span></p>
	  						</td>
	  						<td class="other-case">
	  							<p>透前：<span>${jl.tq_nl}</span></p>
	  							<p>透后：<span>${jl.th_nl}</span></p>
	  						</td>
	  					</tr>
  					 </c:forEach>
  				</tbody>
  			</table>
  		</div>
    </div>
    
	<script src="js/jquery/jquery-1.9.1.min.js"></script> 
 	<script src="js/layer/layer.js"></script> 
 	<script src="js/common/disable-change-font.js"></script>
 	<script src="https://s22.cnzz.com/z_stat.php?id=1262287469&web_id=1262287469" language="JavaScript"></script>
 	<script>
 		var body_width = $("body").width();
 		
 		localStorage.setItem("ccwd_body_width", body_width);
 		$("#markViewWrap").width(localStorage.getItem("ccwd_body_width"))
 		var tx_number = window.parent.window.tx_number || ${param.tx_number};//前面的有值说明是从治疗小结跳转到这个页面的
		var user_id = window.parent.window.user_id || ${userinfo.USER_ID.substring(0, 4)};
		var zlxj_to_wd_flag = window.parent.window.zlxj_to_wd_flag;
		var randomNum = parseInt(Math.random()*10000000);
		$("#ossPointMarkImg").attr("src","https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/"+ user_id +"/"+ tx_number +".png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&v="+randomNum);
		$("#ossPointMarkImg").attr("onerror","this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?v=20180126';")
		
		var xgtlTagId = "";
	 	
	 	//显示在PC端做的位点标记 
		function previewMark() {
			if(!'${wdt.tx_xgtl_text}'){
				$("#mark_tips").text("暂无位点标记数据")
				$("#markViewWrap .save-mark").text("").removeAttr("onclick").css("cursor","default");
				return
			}
			$(".save-mark").text("保存")
			var mark_data = JSON.parse('${wdt.tx_xgtl_text}'),			
			 	mark_A = mark_data.A,
			 	mark_V = mark_data.V,
			 	mark_T = mark_data.T;
			if(mark_data.status == "empty"){
	     			return false;
	     		}
			if(mark_A.length === 0 && mark_V == 0 && mark_T === 0){
				return
			}

			mark_A.map(function (i, v) {
				var tag_span_a1 = '<span class="mark-line mark-line-a" style="transform: rotate(' + i.rotate +
					'deg);" data-rotate="' + i.rotate + '"></span>';
				var tag_div_a1 = '<div class="mark-num-child"  data-num="' + 
				parseInt(i.markNum) + '">'+parseInt(i.markNum)+'</div>';
				var num = parseInt(i.markNum);
				var markDom = '<div class="mtx-mark-tag mark-target-a mark-target-a' + num + '" data-left=' + i.left + ' data-top=' + i.top +' data-num=' + num +
					' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span_a1 + tag_div_a1 + '</div>';
				$(markDom).appendTo($("#point_mark_img_wrap1"));
				$("#xgtl_mark_a").append("<option value='"+num+"'>"+num+"</option>");
			})

			mark_V.map(function (i, v) {
				var tag_span = '<span class="mark-line mark-line-v" style="transform: rotate(' + i.rotate +
					'deg);" data-rotate="' + i.rotate + '"></span>';
				var tag_div_v1 = '<div class="mark-num-child"  data-num="' + 
				parseInt(i.markNum) + '">'+parseInt(i.markNum)+'</div>';	
				var num = parseInt(i.markNum);
				var markDom = '<div class="mtx-mark-tag mark-target-v mark-target-v' + num + '" data-left=' + i.left + ' data-top=' + i.top +' data-num=' + num +
					' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span + tag_div_v1 +'</div>';
				$(markDom).appendTo($("#point_mark_img_wrap1"));
				$("#xgtl_mark_v").append("<option value='"+num+"'>"+num+"</option>");
			})

			mark_T.map(function (i, v) {
				var markDom = '<div class="add-mark-text-wrap" data-left=' + i.left + ' data-top=' + i.top +' data-width='+i.width+' style="position:absolute;left:' + i.left + '%;top:' + i.top + '%;width:'+i.w+'%">'
								+	'<input type="text"  class="mark-text-ipt" value="'+ i.text +'" readonly="true" style="width:'+ i.width +'px;">'
								+	'<span class="mark-text-line" style="transform: rotate(' + i.rotate + 'deg);" data-rotate="' + i.rotate + '"></span>'
								+'</div>'	
				$(markDom).appendTo($("#point_mark_img_wrap1"));
			})
			
			var scale = $("#point_mark_img_wrap1").outerWidth() / 600 * 100; //PC端的图片容器宽度为600，计算缩放比例
			$("#point_mark_img_wrap1 .mtx-mark-tag").each(function (i, v) {
				var $that = $(this),
					width = parseInt($that.width()) * scale / 100,
					height = parseInt($that.height()) * scale / 100,
					left = parseInt($that.data("left")) * scale / 100,
					top = parseInt($that.data("top")) * scale / 100;
				$that.css({
					"left": left + "px",
					"top": top + "px",
					"width": width + "px",
					"height": height + "px",
					"line-height": height + "px",
					"border-radius": height / 2 + "px"
				})
				
				var $line = $that.find(".mark-line");
				$line.css({
					"width": $line.width() * scale / 100,
					"transform": "rotate(" + $line.data("rotate") + "deg)"
				})
				if($("#point_mark_img_wrap1").outerWidth() / 600 < 0.7 ){
					$("div.mark-num-child").css({
						"font-size": "12px"
					})
					$that.css({
						"font-size": "12px",
						"transform": "scale(1.2,1.2)"
					})
					$line.css({
						"transform": "rotate(" + $line.data("rotate") + "deg) scale(0.83333)"
					})
				}
				if($("#point_mark_img_wrap1").outerWidth() / 600 > 1.17 ){//屏幕宽度大于720px
					$("div.mark-num-child").css({
						"font-size": "26px"
					})
					$line.css({
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
				}
			})
			
			$("#point_mark_img_wrap1 .add-mark-text-wrap").each(function (i, v) {
				var $that  = $(this),
					width  = parseInt($that.width()) * scale / 100,
					height = parseInt($that.height()) * scale / 100;
				$that.css({
					"height": height + "px"
				})
				
				var $line = $that.find(".mark-text-line");
				$line.css({
					"width": $line.width() * scale / 100,
					"transform": "rotate(" + $line.data("rotate") + "deg)"
				})
			})
		}
		
		$(function () {
			previewMark()
			getOSSAuth();//获取授权
			
			$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){//获取是否有位点标记历史记录ID
		     	if(res.status.length > 0){
			     	xgtlTagId = res.status[0].tx_id;
			     }
		     })
		     
			$("#pointMarkList .mark-point-text").each(function(i,v){//移除位点为空的使用记录
				if($(v).find("span").eq(0).text() === "" || $(v).find("span").eq(1).text() === ""){
					$(v).parent().remove()
				}
			})
			if($("#pointMarkList .mark-point-text").length == 0){
				$("#markListTbody").append('<tr><td colspan="3" align="center">暂无位点记录数据</td></tr>');
			}
			$("#markViewWrap").on("click", "div.back", function () {
				var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				parent.layer.close(index); //执行关闭
			})

			// 根据上一次的位点使用情况选择下一个位点
			var lastMark_a = parseInt($(".mark-point").eq(1).find(".mark-a").text()) || $("#xgtl_mark_a").val();
			var lastMark_v = parseInt($(".mark-point").eq(1).find(".mark-v").text()) || $("#xgtl_mark_v").val();
			var mark_a_arr = [],mark_v_arr = [];
			$("#point_mark_img_wrap1 .mark-target-a").each(function(i,v){
				mark_a_arr.push($(this).data("num"))
			})
			$("#point_mark_img_wrap1 .mark-target-v").each(function(i,v){
				mark_v_arr.push($(this).data("num"))
			})
			mark_a_arr = mark_a_arr.sort();
			mark_v_arr = mark_v_arr.sort();
			if(zlxj_to_wd_flag === "zlxj"){//如果是治疗小结，高亮上次的位点标识
				$(".mark-target-a"+lastMark_a).addClass("active")
				$("#xgtl_mark_a").val(lastMark_a)
				$(".mark-target-v"+lastMark_v).addClass("active")
				$("#xgtl_mark_v").val(lastMark_v)
			}else{//如果是开始透析，递增上一次的位点标识，如果没有历史记录选择第一个
				
				if(lastMark_a){
				
					if(lastMark_a < mark_a_arr[mark_a_arr.length-1]){//不是最大的值时，需判断下一个更大的
						var mark_a_next = 0;
						for(var ia = 0;ia < mark_a_arr.length;ia++){
							if(lastMark_a === mark_a_arr[ia]){
								mark_a_next = ia + 1;
								break;
							}
						}
						lastMark_a = mark_a_arr[mark_a_next];
						$(".mark-target-a"+lastMark_a).addClass("active")
						$("#xgtl_mark_a").val(lastMark_a)
					}else{
						$(".mark-target-a").eq(0).addClass("active")
						$("#xgtl_mark_a").val($(".mark-target-a").eq(0).data("num"))
					}
				}else{
					$(".mark-target-a" + $("#xgtl_mark_a").val()).addClass("active")
				}
				
				if(lastMark_v){
					if(lastMark_v < mark_v_arr[mark_v_arr.length-1]){
						var mark_v_next = 0;
						for(var iv = 0;iv < mark_v_arr.length;iv++){
							if(lastMark_v === mark_v_arr[iv]){
								mark_v_next = iv + 1;
								break;
							}
						}
						lastMark_v = mark_v_arr[mark_v_next];
						$(".mark-target-v"+lastMark_v).addClass("active")
						$("#xgtl_mark_v").val(lastMark_v)
					}else{
						$(".mark-target-v").eq(0).addClass("active")
						$("#xgtl_mark_v").val($(".mark-target-v").eq(0).data("num"))
					}
				}else{
					$(".mark-target-v" + $("#xgtl_mark_v").val()).addClass("active")
				}
			}
			
			// 点击图标切换下拉框的值
			$("#point_mark_img_wrap1").on("click", ".mtx-mark-tag", function (e) {
				var index = $(this).data("num");
				if ($(this).hasClass("mark-target-a")) {
					$(this).addClass("active").siblings(".mark-target-a").removeClass("active");
					$("#xgtl_mark_a").val(index)
				} else {
					$(this).addClass("active").siblings(".mark-target-v").removeClass("active");
					$("#xgtl_mark_v").val(index)
				}
			})
			
			//更换图片
			$("#change_pic_btn").on("click",function(){
	     		layer.confirm('更换图片后原有标记将被清除!', {
		            icon: 3,
		            title: '提示'
		        }, function (index) {
					$("#changePicInput").click()
		
		            layer.close(index);
		        }, function (index) {
					
		        });
			})
		});

		// 点击选择框切换图标样式
		function selectMarkA(select, markele) {
			var mark = $(select + " option:selected").val();
			$(markele).each(function (i, v) {
				var index = $(this).data("num");
				if (mark == index) {
					$(this).addClass("active").siblings(markele).removeClass("active");
					return false;
				}
			})
		}

		// 保存位点标记
		function saveMarkList() {
			var mark_a = $("#xgtl_mark_a option:selected").val();
			var mark_v = $("#xgtl_mark_v option:selected").val();
			var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			if(!mark_a){
				layer.msg("请选择A端位点标记!")
				return
			}
			if(!mark_v){
				layer.msg("请选择V端位点标记!")
				return
			}
			$("#selectMark_a",parent.document).val(mark_a);
			$("#selectMark_v",parent.document).val(mark_v);
			$("#selectMark_show",parent.document).val("A端：" + mark_a + " , V端："+ mark_v);
			parent.layer.close(index); //执行关闭
		}
		
		 /** 获取图片名称 **/
		var eleFile = document.querySelector('#changePicInput');
		
		if (window.FormData) {
			// 压缩图片需要的一些元素和对象
			var reader = new FileReader(), img = new Image();
			
			// 选择的文件对象
			var file = null;
			
			// 缩放图片需要的canvas
			var canvas = document.createElement('canvas');
			var context = canvas.getContext('2d');
			
			// base64地址图片加载完毕后
			img.onload = function () {
				// 图片原始尺寸
				var sort_w = this.height;
				var sort_h = this.width;
				var originWidth = this.width;
				var originHeight = this.height;
				
				//var originWidth = sort_w;
				//var originHeight = sort_h;
				// 计算出目标压缩尺寸
				var maxWidth = 600, 
					maxHeight = 800;
				
				// 目标尺寸
				var targetHeight ,targetWidth;
				//targetWidth = 600;targetHeight = 600*1.7778;
				
				// 按照宽度限定尺寸
	            targetWidth = maxWidth;
	            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
	            
	            //按照高度限定尺寸
	            //targetHeight = maxHeight;
				//targetWidth = Math.round(maxHeight * (originWidth / originHeight));
				canvas.width = targetWidth;
				canvas.height = targetHeight;
				
				// 清除画布
				/* var degree = 1 * 90 * Math.PI / 180; 
				context.rotate(degree);  */ 
				context.clearRect(0, 0, targetWidth, targetHeight);
				
				// 图片压缩
				context.drawImage(img, 0, 0, targetWidth, targetHeight);
				
				// 转为blob并上传
				canvas.toBlob(function (blob) {
					upload(blob)
					
				}, file.type || 'image/png');
			};
			
			// 文件base64化，以便获知图片原始尺寸
			reader.onload = function(e) {
				// 图片尺寸
				img.src = e.target.result;
				/* var i = new Image();
		            i.src = e.target.result;
		            i.crossOrigin="anonymous";
		            
				    //封装blob对象  
					var  blob = convertBase64UrlToBlob(i.src); 
		            upload(blob) */
			};
			eleFile.addEventListener('change', function (event) {
				file = event.target.files[0];
				if (file.type.indexOf("image") == 0) {
					reader.readAsDataURL(file);	
				} else {
					layer.alert("仅支持图片格式为jpg、gif、bmp、png、jpeg的文件！")
				}
			});
		}
	  
	   //上传图片到OSS
	   
	   var accessid='',policy='',signature='', Signature='', key="xgtl/${userinfo.USER_ID.substring(0, 4)}/" + tx_number + ".png" ,host='',expire = 0,now = 0;
	   //var accessid='',policy='', Signature='', key="xgtl/${userinfo.USER_ID.substring(0, 4)}/xgtl_operation02.png" ,host='',expire = 0,now = 0;
	   //获取授权
	   function getOSSAuth(){
	      now = Date.parse(new Date()) / 1000; 
	      if (expire < now + 3){
		       $.post("${ctx}OSSAuth/yjxgtl.shtml",function(data){
		        accessid=data.accessid;
		        policy=data.policy;
		        signature=data.signature;
		        expire=data.expire;
		        host=data.host;
		      });
	       }
	   }
	  
	  //获取文件后缀名 
	  function get_suffix(filename) {
	    pos = filename.lastIndexOf('.')
		
	    suffix = ''
	    if (pos != -1) {
	        suffix = filename.substring(pos)
	    }
	    return suffix;
	  }
	   setTimeout(() => {
		$("div.loding-wrap").css("display","none");
	   }, 8000);
	  function upload(blob){
	  	 getOSSAuth();//获取授权
	  	 var index_up = layer.msg("图片上传中...",{time:8000});
	     var fileval = $("input[name='mark_img']").val();
	     var request = new FormData(); 
		   request.append('OSSAccessKeyId', accessid);
	       request.append('policy', policy);
	       request.append('Signature',signature);
	       request.append('key',key);//+filename
	       request.append('success_action_status','200');//status头，如果不设置返回的是204
	       request.append('Access-Control-Allow-Origin','*');
	       request.append('Access-Control-Allow-Methods','GET, POST');
		   request.append('file', $("#changePicInput")[0].files[0]);
	       $.ajax({
	           url: host,
	           data: request,
	           processData: false,
	           cache: false,
	           async: false,
	           contentType: false,
	           //关键是要设置contentType 为false，不然发出的请求头 没有boundary
	           type: "POST",
	           beforeSend:function(){
	           },
	           success: function (data,textStatus, request) {
	            $("#changePicInput").val("");
             	var changePic = layer.load(2, {time: 10*1000});
             	$("#point_mark_img_wrap1 div.add-mark-text-wrap").remove();
             	$("div.mtx-mark-tag").remove();
             	var time = Date.parse(new Date());
             	$("#ossPointMarkImg").attr("src","https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${userinfo.USER_ID.substring(0, 4)}/" + tx_number + ".png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&tag="+time);
             	
             	document.getElementById("ossPointMarkImg").onload = function () {
			        layer.close(changePic)
			        $("#markViewWrap select").empty();
			        $("#markViewWrap .save-mark").text("").removeAttr("onclick").css("cursor","default");
			        $("#xgtl_mark_a,#xgtl_mark_v").attr("disabled","disabled"); 
			        $("#selectMark_a",parent.document).val("");
					$("#selectMark_v",parent.document).val("");
					$("#selectMark_show",parent.document).val("");
			        layer.msg("图片上传成功");
			        document.getElementById("ossPointMarkImg").onload = null;
			    }
             	var sendDatas = {"status":"empty"};
             	var datas = {};
			 	 if(xgtlTagId){// 清除原来的标记
			 	 	datas = {
			 	 	 "tx_id":xgtlTagId,
			 	 	 "tx_number":tx_number,
			 	 	 "tx_xgtl_a":"",
			 	 	 "tx_xgtl_v":"",
			 	 	 "tx_xgtl_text":JSON.stringify(sendDatas)
			 	 	}
			 	 	
			 	 	$.post("xgtl/updatexgtlwdt.shtml",datas,function(res){
				 	 	if(res.status != 0){
				 	 		console.log("清除历史标记成功")
				 	 	}else{
				 	 		console.log("清除历史标记失败")
				 	 	}
				 	 })
			 	 }
	           },
	           error: function (data,textStatus, request) {
	           		layer.msg("上传失败，请重试！");
	           },
	           complete:function(){
	           		layer.close(index_up)
	           }
	       });
	   }
	   function convertBase64UrlToBlob(urlData){
		    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
		    //处理异常,将ascii码小于0的转换为大于0
		    var ab = new ArrayBuffer(bytes.length);
		    var ia = new Uint8Array(ab);
		    for (var i = 0; i < bytes.length; i++) {
		        ia[i] = bytes.charCodeAt(i);
		    }
		    return new Blob( [ab] , {type : 'image/png'});
		}
		
		
		function upload1(){
     var fileval=$("#changePicInput").val();
     if(fileval==''){return layer.msg('请先拍照或者选择照片！');}
    // return false;
     getOSSAuth();//获取授权
     //var filename=get_suffix($(".upload_input").val()); //获取文件后缀名
     var request = new FormData(); 
	   request.append('OSSAccessKeyId', accessid);
       request.append('policy', policy);
       request.append('Signature',signature);
       request.append('key',key);//+filename
       request.append('success_action_status','200');//status头，如果不设置返回的是204
       request.append('Access-Control-Allow-Origin','*');
       request.append('Access-Control-Allow-Methods','GET, POST');
       request.append('file', $("#changePicInput")[0].files[0]);
       $.ajax({
           url: host,
           data: request,
           processData: false,
           cache: false,
           async: false,
           contentType: false,
           //关键是要设置contentType 为false，不然发出的请求头 没有boundary
           type: "POST",
           beforeSend:function(){
           },
           success: function (data,textStatus, request) {
             if (request.status == '200') {
                 var src = window.URL.createObjectURL($(".upload_input")[0].files[0]);
			     var img = document.createElement('img');
			     img.setAttribute("class","head_user_pic");
			     img.src = src; 
			     $("div.head_user_prev>img").replaceWith(img);
			     layer.msg('上传头像成功！');
             }
           },
           error: function (data,textStatus, request) {
        	   layer.msg('上传失败，请刷新重试！');
           },complete:function(){
           }
       });
   }
 	</script>	
  </body>
</html>